
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/echarts.min.js"></script>
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 1%;
            list-style: none;
        }
        label{
            font-size: 12px;
        }
		#SC>div{
            float: left;
            width: 30%;
            height:300px;
        }
    </style>
	<script class ="json_" src="info.json"></script>
</head>
<body> 
 	<div>
       <label for="setTime">刷新时间(单位/s) <input type="text" id="setTime" name="seTime"></label>
        <button type="button" id="yes">确定</button>
    </div>
	<div id="SC">  

		<div id="Role" style="width: 30%;height:300px;"></div>
		<div id="Map" style="width: 30%;height:300px;"></div>
		<div id="InstanceZone" style="width: 30%;height:300px;"></div>
		<div id="Mission" style="width: 30%;height:300px;"></div>
		<div id="Weapon" style="width: 30%;height:300px;"></div>
		<div id="Other" style="width: 30%;height:300px;"></div>
	</div>
</body>
<script src="info.json"></script>
<script>
	var timeInterval = 1
	var timer
	
	function setTimeInterval(){
		$.ajax({
			url:'http://10.128.2.153:10001/SetTime',
			type:'POST',
			data:{
				TimeInterval:timeInterval,
			},
			dataType:'json',
		})
		
	}

	timer = setInterval(function(){
    	RefreshJson();
		var oS=document.querySelector('.json_');
        document.head.removeChild(oS);//调用完删除在showSC函数里创建的script标签
	},timeInterval * 1000)	
	
	var btn = document.getElementById('yes');
    btn.addEventListener('click',
        function () {
            var setTime = document.getElementById('setTime');
            var time = parseInt(setTime.value);
            console.log(time);
			timeInterval = time
			setTimeInterval() 
	        clearInterval(timer); //每次先清除前面设置的定时器
	        timer = setInterval(function () {
	            RefreshJson();
	            var oS=document.querySelector('.json_');
	            document.head.removeChild(oS);//调用完删除在showSC函数里创建的script标签
	        },time*1000); //单位是s
			
        }
    );
	
	function RefreshJson(){
		var oS=document.createElement('script');
		oS.className = 'json_';
        oS.src='info.json';
        document.head.appendChild(oS);
        setTimeout(draw,1000);
		draw()
	}
	function draw(){
		var Role_Chart = echarts.init(document.getElementById('Role'));
	    Role_option = {
	        title: {text: 'Role'},
			tooltip: {trigger: 'axis'},
			legend: {data:['ServerList','RoleList','SelectRole','CreateRole',]},
	        grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
	        xAxis: {type: 'category',boundaryGap: false,data: ['1','2','3','4','5','6','7']},
	        yAxis: {type: 'value'},
	        series: [
				{name:'ServerList',type:'line',data:data.transactionServerList},
				{name:'RoleList',type:'line',data:data.transactionRoleList},
				{name:'SelectRole',type:'line',data:data.transactionSelectRole},
				{name:'CreateRole',type:'line',data:data.transactionCreateRole},
			]	
    	};
    	Role_Chart.setOption(Role_option);
		
		var Map_Chart = echarts.init(document.getElementById('Map'));
	    Map_option = {
	        title: {text: 'Map'},
			tooltip: {trigger: 'axis'},
			legend: {data:['EnterMap','Move','StartAoi','TeleportPoint',]},
	        grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
	        xAxis: {type: 'category',boundaryGap: false,data: ['1','2','3','4','5','6','7']},
	        yAxis: {type: 'value'},
	        series: [
				{name:'EnterMap',type:'line',data:data.transactionEnterMap},
				{name:'Move',type:'line',data:data.transactionMove},
				{name:'StartAoi',type:'line',data:data.transactionStartAoi},
				{name:'TeleportPoint',type:'line',data:data.transactionTeleportPoint},
			]	
    	};
    	Map_Chart.setOption(Map_option);
		
		var InstanceZone_Chart = echarts.init(document.getElementById('InstanceZone'));
	    InstanceZone_option = {
	        title: {text: 'InstanceZone'},
			tooltip: {trigger: 'axis'},
			legend: {data:['EndInstanceZone','EnterBossZone','EnterInstanceZone','EnterCampaign','LeaveMap',]},
	        grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
	        xAxis: {type: 'category',boundaryGap: false,data: ['1','2','3','4','5','6','7']},
	        yAxis: {type: 'value'},
	        series: [
				{name:'EndInstanceZone',type:'line',data:data.transactionEndInstanceZone},
				{name:'EnterBossZone',type:'line',data:data.transactionEnterBossZone},
				{name:'EnterInstanceZone',type:'line',data:data.transactionEnterInstanceZone},
				{name:'EnterCampaign',type:'line',data:data.transactionEnterCampaign},
				{name:'LeaveMap',type:'line',data:data.transactionLeaveMap},
			]	
    	};
    	InstanceZone_Chart.setOption(InstanceZone_option);
		
		var Mission_Chart = echarts.init(document.getElementById('Mission'));
	    Mission_option = {
	        title: {text: 'Mission'},
			tooltip: {trigger: 'axis'},
			legend: {data:['AcceptMission','CompleteMission','TalkToNpc',]},
	        grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
	        xAxis: {type: 'category',boundaryGap: false,data: ['1','2','3','4','5','6','7']},
	        yAxis: {type: 'value'},
	        series: [
				{name:'AcceptMission',type:'line',data:data.transactionAcceptMission},
				{name:'CompleteMission',type:'line',data:data.transactionCompleteMission},
				{name:'TalkToNpc',type:'line',data:data.transactionTalkToNpc},
			]	
    	};
    	Mission_Chart.setOption(Mission_option);
		
		var Weapon_Chart = echarts.init(document.getElementById('Weapon'));
	    Weapon_option = {
	        title: {text: 'Weapon'},
			tooltip: {trigger: 'axis'},
			legend: {data:['DemountWeapon','EquipWeapon','ExchangeWeapon','WeaponDemountSoul','WeaponEquipSoul','WeaponUpStar',]},
	        grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
	        xAxis: {type: 'category',boundaryGap: false,data: ['1','2','3','4','5','6','7']},
	        yAxis: {type: 'value'},
	        series: [
				{name:'DemountWeapon',type:'line',data:data.transactionDemountWeapon},
				{name:'EquipWeapon',type:'line',data:data.transactionEquipWeapon},
				{name:'ExchangeWeapon',type:'line',data:data.transactionExchangeWeapon},
				{name:'WeaponDemountSoul',type:'line',data:data.transactionWeaponDemountSoul},
				{name:'WeaponEquipSoul',type:'line',data:data.transactionWeaponEquipSoul},
				{name:'WeaponUpStar',type:'line',data:data.transactionWeaponUpStar},
			]	
    	};
    	Weapon_Chart.setOption(Weapon_option);
		
		var Other_Chart = echarts.init(document.getElementById('Other'));
	    Other_option = {
	        title: {text: 'Other'},
			tooltip: {trigger: 'axis'},
			legend: {data:['Buy','Chat','GameMaster','Time',]},
	        grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
	        xAxis: {type: 'category',boundaryGap: false,data: ['1','2','3','4','5','6','7']},
	        yAxis: {type: 'value'},
	        series: [
				{name:'Buy',type:'line',data:data.transactionBuy},
				{name:'Chat',type:'line',data:data.transactionChat},
				{name:'GameMaster',type:'line',data:data.transactionGameMaster},
				{name:'Time',type:'line',data:data.transactionTime},
			]	
    	};
    	Other_Chart.setOption(Other_option);
		
	}
</script>
</html>